<template>
	<view class="Body service">
		<view class="Site PageBox">
			<view class="van-nav-bar van-nav-bar--fixed">
				<view class="van-nav-bar__content">
					<view class="van-nav-bar__left" @click="back">
						<u-icon name="arrow-left" color="#fff" size="28rpx"></u-icon>
					</view>
					<view class="van-nav-bar__title van-ellipsis" style="color: #fff;margin-left: 56rpx;">
						{{common.news[7]}}</view>
					<view>
					</view>
				</view>
			</view>

			<view class="new-top">
				<view class="new-item">
					<view class="title1">
						100%{{common.news[8]}}
					</view>
					<view class="title2">

					</view>
					<view class="title3">
						{{title}}
						{{common.news[9]}}
					</view>
				</view>
			</view>

			<view class="new-center">
				<view class="new-c-title">
					{{title}}
					{{common.news[11]}}
				</view>
				<view class="new-c-title2">

				</view>
				<view class="new-c-title3">
					{{common.news[12]}}。
				</view>
				<view class="new-item" style="margin-top: 0rpx;">
					<view class="new-item-top">
						<image src="../../static/image/my/leib.png" mode=""></image>
						<text style="flex: 1;">BTC {{common.news[13]}}</text>
						<image src="../../static/image/my/cbj1.png" mode=""></image>
						<text class="new-item-num">426%</text>
					</view>
					<view class="new-item-bottom">
						<view class="bottom-item" style="border-right: 1rpx solid #157996;">
							<text>NYSE {{common.news[15]}}</text>
							<text class="bottom-num">10650.04 BTC</text>
						</view>
						<view class="bottom-item" style="padding-left: 32rpx;">
							<text>NYSE {{common.news[16]}}</text>
							<text class="bottom-num">2499.80 BTC</text>
						</view>
					</view>
				</view>
				<view class="new-item" style="background-image: url('../../static/image/my/byj4.png');">
					<view class="new-item-top">
						<image src="../../static/image/my/leib.png" mode=""></image>
						<text style="flex: 1;" >USDT {{common.news[13]}}</text>
							<image src="../../static/image/my/cbj1.png" mode=""></image>
							<text class="new-item-num">124%</text>
					</view>
					<view class="new-item-bottom">
						<view class="bottom-item" style="border-right: 1rpx solid #157996;">
							<text>NYSE {{common.news[15]}}</text>
							<text class="bottom-num">483710438.52 USDT</text>
						</view>
						<view class="bottom-item" style="padding-left: 32rpx;">
							<text>NYSE {{common.news[16]}}</text>
							<text class="bottom-num">388881644.39 USDT</text>
						</view>
					</view>
				</view>
				<view class="new-item" style="background-image: url('../../static/image/my/byj5.png');">
					<view class="new-item-top">
						<image src="../../static/image/my/leib.png" mode=""></image>
						<text style="flex: 1;">ETH {{common.news[13]}}</text>
						<image src="../../static/image/my/cbj1.png" mode=""></image>
						<text class="new-item-num">158%</text>
					</view>
					<view class="new-item-bottom">
						<view class="bottom-item" style="border-right: 1rpx solid #157996;">
							<text>NYSE {{common.news[15]}}</text>
							<text class="bottom-num">19054.26 ETH</text>
						</view>
						<view class="bottom-item" style="padding-left: 32rpx;">
							<text>NYSE {{common.news[16]}}</text>
							<text class="bottom-num">12037.32 ETH</text>
						</view>
					</view>
				</view>
				<view class="new-item" style="background-image: url('../../static/image/my/byj7.png');">
					<view class="new-item-top">
						<image src="../../static/image/my/leib.png" mode=""></image>
						<text style="flex: 1;">USDC {{common.news[13]}}</text>
						<image src="../../static/image/my/cbj1.png" mode=""></image>
						<text class="new-item-num">1988%</text>
					</view>
					<view class="new-item-bottom">
						<view class="bottom-item" style="border-right: 1rpx solid #157996;">
							<text>NYSE {{common.news[15]}}</text>
							<text class="bottom-num">160704550.03 USD</text>
						</view>
						<view class="bottom-item" style="padding-left: 32rpx;">
							<text>NYSE {{common.news[16]}}</text>
							<text class="bottom-num">8082542.94 USDC</text>
						</view>
					</view>
				</view>

				<view class="bew-bottom">
					<view class="bew-top">
						{{common.news[17]}}
					</view>
					<view class="bew-cner">
						<view class="cner-left">
							<text class="cner-left-top">{{common.news[18]}}</text>
							<text style="height: 40rpx;line-height: 40rpx;">· {{common.news[19]}}</text>
							<text style="height: 40rpx;line-height: 40rpx;">· {{common.news[20]}}</text>
						</view>
						<image src="../../static/image/my/cbj1.png" mode=""></image>
					</view>
					<view class="bew-cner" style="height: 232rpx;background: #EEEEEE;border-radius: 0rpx 0rpx 10rpx 10rpx;">
						<view class="cner-left">
							<text class="cner-left-top">{{common.news[21]}}</text>
							<text style="height: 40rpx;line-height: 40rpx;">· {{common.news[22]}}</text>
							<text style="height: 40rpx;line-height: 40rpx;">· {{common.news[23]}}</text>
						</view>
						<image src="../../static/image/my/cbj2.png" mode=""></image>
					</view>
				</view>
			</view>



			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: "ACE",
			};
		},
		onLoad() {
			this.getInformation()
		},
		methods: {
			getInformation() {
				this.$u.api.index.getField('site_title').then(res => {
					this.title = res.data
				})
			},

			dumprun(url) {
				uni.navigateTo({
					url
				})
			},

			back() {
				uni.navigateBack(-1)
			}
		},
		computed: {
			common() {
				return this.$t("common")
			},
		}
	}
</script>

<style scoped lang="scss">
	.ScrollBox {
		padding: 0 !important;
	}

	.Site .van-nav-bar .van-icon {
		font-size: 1.5rem !important;
		color: #bbb !important;
	}

	.PageBox {
		color: #fff;
		padding-top: 40px;
		background-color: #2A2D34 !important;
		overflow-y: scroll;
		padding-bottom: 88rpx;
	}

	.van-nav-bar {
		background-color: #1a1a1a !important;
	}

	.van-nav-bar .van-nav-bar__title {
		color: #222;
		font-weight: 700
	}

	.ScrollBox {
		background-color: #2A2D34;
	}

	.van-cell {
		padding: 17px 0;
		background-color: #191c23
	}

	.van-cell__title {
		color: #e7e7e7
	}



	.service {
		// padding: 30rpx;
		background-color: #2A2D34;

		.service_list {
			overflow: scroll;

			.service_item {
				margin-bottom: 20rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #222;
				height: 100rpx;
				border-radius: 12rpx;
				background-color: #03E4DF;
			}
		}
	}

	.el-button[data-v-c3e2c8a0] {
		display: inline-block;
		line-height: 1;
		white-space: nowrap;
		color: #606266;
		-webkit-appearance: none;
		box-sizing: border-box;
		outline: 0;
		transition: .1s;
		font-weight: 500;
		-moz-user-select: none;
		-webkit-user-select: none;
		-ms-user-select: none;
		font-size: 14px
	}

	.reserve-bannercon[data-v-c3e2c8a0] {
		// background: rgba(42, 200, 221, .1)
	}

	.reserve-banner[data-v-c3e2c8a0] {
		padding: 0 16px 16px;
		margin: 0 auto
	}

	.reserve-banner-left[data-v-c3e2c8a0] {
		display: inline-block
	}

	.reserve-banner-left__title[data-v-c3e2c8a0] {
		margin-top: 52px;
		// color: #fff
	}

	.reserve-banner-left__des[data-v-c3e2c8a0] {
		margin-top: 24px;
		font-style: normal;
		// color: #d5d5d5;
		font-weight: 400;
		font-size: 14px
	}

	.reserve-banner-left__action[data-v-c3e2c8a0] {
		margin-top: 20px
	}

	.reserve-banner-left__action__btn1[data-v-c3e2c8a0] {
		border-radius: 8px;
		background-color: #03aac7;
		margin-bottom: 10px;
		display: inline-flex;
		align-items: center;
		justify-content: center
	}

	.reserve-banner-left__action__btn1[data-v-c3e2c8a0] {
		margin-right: 16px
	}

	.reserve-bannercon .reserve-banner-left__action__btn1[data-v-c3e2c8a0] {
		// color: #fff !important;
		height: 48px;
		min-width: 160px;
		overflow: hidden
	}

	.reserve-banner-left__action__btn2[data-v-c3e2c8a0] {
		color: #03aac7;
		height: 48px;
		width: 120px
	}

	.reserve-banner-left__action__btn2[data-v-c3e2c8a0] {
		border-radius: 8px;
		background-color: rgba(42, 200, 221, .01);
		border-color: #03aac7;
		border-style: solid;
		border-width: 1px;
		display: inline-flex;
		align-items: center;
		justify-content: center
	}

	.reserve-content[data-v-c3e2c8a0] {
		padding: 0 16px
	}

	.reserve-content-search[data-v-c3e2c8a0] {
		margin: 0 auto;
		padding: 50px 0 0
	}

	.reserve-content-search__m-top[data-v-c3e2c8a0] {
		font-weight: 700;
		font-size: 24px;
		line-height: 30px;
		// color: #fff
	}

	.reserve-content-search__m-mid[data-v-c3e2c8a0] {
		font-weight: 400;
		font-size: 14px;
		line-height: 20px;
		// color: #fff;
		margin-top: 16px;
		margin-bottom: 30px
	}

	.currency-item[data-v-c3e2c8a0] {
		padding: 22px 32px;
		border: 1px solid #ebebeb;
		border-radius: 8px;
		margin-bottom: 20px
	}

	.currency-item-top[data-v-c3e2c8a0] {
		padding-bottom: 24px;
		margin-bottom: 24px;
		border-bottom: 1px solid #ebebeb;
		display: flex
	}

	.currency-item-top-left-img[data-v-c3e2c8a0] {
		width: 64px
	}

	.currency-item-top-right[data-v-c3e2c8a0] {
		margin-left: 16px
	}

	.currency-item-top-right-header[data-v-c3e2c8a0] {
		font-style: normal;
		font-weight: 500;
		font-size: 16px;
		line-height: 22px;
		// color: #ced6d7
	}

	.currency-item-top-right-content[data-v-c3e2c8a0] {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 4px
	}

	.currency-item-top-right-content-num[data-v-c3e2c8a0] {
		font-style: normal;
		font-weight: 700;
		font-size: 32px;
		line-height: 40px;
		// color: #fff
	}

	.currency-item-top-right-content-des[data-v-c3e2c8a0] {
		font-style: normal;
		font-weight: 400;
		font-size: 16px;
		line-height: 22px;
		color: #03aac7;
		margin-left: 12px
	}

	.currency-item-top-right-content-des-con[data-v-c3e2c8a0] {
		vertical-align: middle;
		margin-right: 6px;
		font-size: 16px
	}

	.currency-item-top-right-content-des-con-img[data-v-c3e2c8a0] {
		width: 16px
	}

	.currency-item-bottom-item[data-v-c3e2c8a0] {
		display: flex;
		justify-content: space-between;
		margin-bottom: 8px
	}

	.currency-item-bottom-item-left[data-v-c3e2c8a0] {
		font-style: normal;
		font-weight: 500;
		font-size: 16px;
		line-height: 22px;
		// color: #929899

	}

	.currency-item-bottom-item-right[data-v-c3e2c8a0],
	.currency-item-bottom-item-sp[data-v-c3e2c8a0] {
		font-style: normal;
		font-size: 16px;
		line-height: 20px;
		// color: #fff;
		text-align: right
	}

	.reserve-contentCon[data-v-c3e2c8a0] {
		margin: 0 auto;
		padding: 0 16px
	}

	.reserve-contentCon-risk[data-v-c3e2c8a0] {
		margin-top: 30px
	}

	.no-risk-title[data-v-c3e2c8a0] {
		font-style: normal;
		font-weight: 700;
		font-size: 20px;
		line-height: 40px;
		// color: #fff;
		margin-bottom: 14px
	}

	.m-risk[data-v-c3e2c8a0] {
		border: 2px solid #ebebeb;
		border-radius: 16px;
		background: #f9f9f9
	}

	.m-risk-top[data-v-c3e2c8a0] {
		padding: 0 26px 26px;
		background-color: #03aac7;
		border-radius: 12px
	}

	.m-risk-top-title[data-v-c3e2c8a0] {
		font-family: PingFang SC;
		font-style: normal;
		font-weight: 600;
		font-size: 20px;
		line-height: 30px;
		// color: #fff;
		padding: 50px 0 0
	}

	.m-risk-top-con[data-v-c3e2c8a0] {
		margin-top: 14px
	}

	.m-risk-top-con-text[data-v-c3e2c8a0] {
		font-family: PingFang SC;
		font-style: normal;
		font-weight: 400;
		font-size: 14px;
		line-height: 30px;
		// color: #fff;
		display: flex;
		align-items: center
	}

	.m-risk-top-con-text-point[data-v-c3e2c8a0] {
		display: flex
	}

	.m-risk-top-con-text-point-item[data-v-c3e2c8a0] {
		width: 6px;
		height: 6px;
		display: inline-block;
		// background-color: #fff;
		border-radius: 100%;
		margin-right: 6px
	}

	.m-risk-vs[data-v-c3e2c8a0] {
		display: flex;
		justify-content: center;
		margin-top: -27px
	}

	.m-risk-vs-img[data-v-c3e2c8a0] {
		width: 54px
	}

	.m-risk-bottom[data-v-c3e2c8a0] {
		padding: 0 26px 26px
	}

	.m-risk-bottom-title[data-v-c3e2c8a0] {
		font-style: normal;
		font-weight: 600;
		font-size: 20px;
		line-height: 30px;
		color: #1e1e1e
	}

	.m-risk-bottom-con[data-v-c3e2c8a0] {
		margin: 14px 0 0
	}

	.m-risk-bottom-con-text[data-v-c3e2c8a0] {
		font-family: PingFang SC;
		font-style: normal;
		font-weight: 400;
		font-size: 14px;
		line-height: 30px;
		// color: #929899;
		display: flex;
		align-items: center
	}

	.m-risk-bottom-con-text-point[data-v-c3e2c8a0] {
		display: flex
	}

	.m-risk-bottom-con-text-point-item[data-v-c3e2c8a0] {
		width: 6px;
		height: 6px;
		display: inline-block;
		// background-color: #929899;
		border-radius: 100%;
		margin-right: 6px
	}

	.m-risk-bottom-con-text-imgCon-img[data-v-c3e2c8a0] {
		width: 16px
	}

	.m-risk-bottom-con-text-imgCon-img[data-v-c3e2c8a0] {
		margin-left: 6px
	}

	.new-top {
		width: 750rpx;
		height: 384rpx;
		background: #222328;
		padding: 16rpx 20rpx;
		box-sizing: border-box;

		.new-item {
			height: 346rpx;
			width: 708rpx;
			background-image: url('../../static/image/my/byjbj.png');
			background-size: 100% 100%;
			padding-left: 34rpx;
			padding-top: 84rpx;
			box-sizing: border-box;

			.title1 {
				font-family: PingFang SC, PingFang SC;
				font-weight: 800;
				font-size: 40rpx;
				color: #fff;
			}

			.title2 {
				margin-top: 26rpx;
				width: 82rpx;
				height: 6rpx;
				background: #03E4DF;
			}

			.title3 {
				margin-top: 26rpx;
				width: 372rpx;

				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 20rpx;
				color: #FFFFFF;
			}
		}
	}

	.new-center {
		margin-top: 14rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 44rpx;
		background-color: #222328;

		.new-c-title {
			font-family: PingFang SC, PingFang SC;
			font-weight: 800;
			font-size: 30rpx;
			color: #FFFFFF;
		}

		.new-c-title2 {
			margin-top: 10rpx;
			width: 82rpx;
			height: 4rpx;
			background: #03E4DF;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
		}

		.new-c-title3 {
			margin-top: 24rpx;
			width: 614rpx;
			// height: 110rpx;
			text-align: center;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #999999;
		}
	}

	.new-item {
		margin-top: 22rpx;
		width: 700rpx;
		height: 288rpx;
		background-image: url('../../static/image/my/byj3.png');
		background-size: 100% 100%;
		padding-left: 34rpx;
		padding-right: 34rpx;
		padding-top: 46rpx;

		.new-item-top {
			display: flex;
			align-items: center;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 28rpx;
			color: #000000;
			padding-bottom: 36rpx;
			border-bottom: 1rpx solid #157996;

			image {
				width: 40rpx;
				height: 40rpx;
				margin-right: 10rpx;
			}

			.new-item-num {
				font-family: PingFang SC, PingFang SC;
				font-weight: 800;
				font-size: 40rpx;
				color: #000000;
			}
		}

		.new-item-bottom {
			margin-top: 36rpx;
			display: flex;

			.bottom-item {
				width: 50%;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #000000;
				display: flex;
				flex-direction: column;

				.bottom-num {
					margin-top: 20rpx;
					font-size: 30rpx;
					font-weight: bold;
					white-space: nowrap;
					/* 不换行 */
					overflow: hidden;
					/* 隐藏超出的内容 */
					text-overflow: ellipsis;
					/* 用省略号表示被隐藏的部分 */
				}
			}
		}
	}

	.bew-bottom {
		margin-top: 50rpx;
		width: 700rpx;
		height: 510rpx;
		background: #F8F8F8;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		

		.bew-top {
			width: 700rpx;
			height: 92rpx;
			background: #03E4DF;
			border-radius: 10rpx 10rpx 0rpx 0rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 800;
			font-size: 32rpx;
			color: #111111;
			text-align: center;
			line-height: 92rpx;
		}

		.bew-cner {
			height: 186rpx;
			background-color: #fff;
			display: flex;
			align-items: center;
			padding-top: 34rpx;
			padding-left: 34rpx;
			padding-right: 46rpx;

			.cner-left {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #000000;
				display: flex;
				flex-direction: column;
				flex: 1;

				.cner-left-top {
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					font-size: 28rpx;
					color: #000000;
					margin-bottom: 12rpx;
				}
			}

			image {
				width: 86rpx;
				height: 86rpx;
			}
		}
	}
</style>